<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
      width="950"
    >
      <Card>
        <p slot="title">
          基本信息
        </p>
        <ul class="listCon">
          <li v-for="(item, index) in baseInfo" :key="index">
            <div v-if="!item.notImmediate">
              {{ item.label }}:
              <span>{{ getKeyVal(item.key, orderData) }}</span>
            </div>
            <div v-else="item.notImmediate">
              <p v-if="item.key == 'warnState'">
                {{ item.label }}:
                <span>
                  <Tag color="red">
                    {{ getKeyVal(item.key, orderData) | warnState }}
                  </Tag>
                </span>
              </p>
              <p v-if="item.key == 'plantType'">
                {{ item.label }}:
                <span>{{ getKeyVal(item.key, orderData) | plantType }}</span>
              </p>
              <p v-if="item.key == 'orderState'">
                {{ item.label }}:
                <span>{{ getKeyVal(item.key, orderData) | orderState }}</span>
              </p>
            </div>
          </li>
        </ul>
      </Card>
      <Card>
        <p slot="title">
          地址信息
        </p>
        <ul class="listCon">
          <li
            v-for="(item, index) in addressInfo"
            :key="index"
            :style="{ width: item.cols ? item.cols + '%' : '20%' }"
          >
            <div v-if="!item.notImmediate">
              {{ item.label }}:
              <span>{{ getKeyVal(item.key, orderData) }}</span>
            </div>
          </li>
        </ul>
      </Card>
      <Card>
        <p slot="title">
          物流信息
        </p>
        <ul class="listCon">
          <li v-for="(item, index) in logisticsInfo" :key="index">
            <div v-if="!item.notImmediate">
              {{ item.label }}:
              <span>{{ getKeyVal(item.key, orderData) }}</span>
            </div>
            <div v-else="item.notImmediate">
              <p
                @click="seeLogistics(1, getKeyVal('takeWayBillNo', orderData))"
                v-if="item.label == '查看取件物流详情'"
                style="cursor: pointer;color: blue;"
              >
                查看取件物流详情
              </p>
              <p
                @click="seeLogistics(2, getKeyVal('backWayBillNo', orderData))"
                v-if="item.label == '查看送件物流详情'"
                style="cursor: pointer;color: blue;"
              >
                查看送件物流详情
              </p>
            </div>
          </li>
        </ul>
      </Card>
      <Card>
        <p slot="title">
          衣物详情
        </p>

        <Table
          :columns="clothingColums"
          :data="orderData.clothesList"
          :max-height="300"
        >
          <template slot-scope="{ row, index }" slot="attaches">
            <p>{{ row.attaches | rowAttaches }}</p>
          </template>
          <template slot-scope="{ row, index }" slot="areaCode">
            <p>{{ row.areaCode }}{{ row.areaNo }}</p>
          </template>
          <template slot-scope="{ row, index }" slot="attachesNumber">
            <p>{{ row.attaches | attachesNumber }}</p>
          </template>
          <template slot-scope="{ row, index }" slot="attachCode">
            <p>{{ row.attaches | attachCode }}</p>
          </template>
          <template slot-scope="{ row, index }" slot="picDetail">
            <p
              v-if="row.imgUrls.length != 0"
              style="cursor: pointer;color: blue;"
              @click="picDetail(row)"
            >
              查看
            </p>
            <p v-else style="cursor: pointer;color: #eee;">查看</p>
          </template>
        </Table>
      </Card>
      <Card>
        <p slot="title">
          异常反馈
        </p>
        <ul class="listCon">
          <li
            v-for="(item, index) in abnormalInfo"
            :key="index"
            :style="{ width: item.cols ? item.cols + '%' : '25%' }"
          >
            <div v-if="!item.notImmediate">
              {{ item.label }}:
              <span>{{ getKeyVal(item.key, orderData) }}</span>
            </div>
            <div v-else="item.notImmediate">
              <p v-if="item.key == 'warnState'">
                {{ item.label }}:
                <span>{{ getKeyVal(item.key, orderData) | warnState }}</span>
              </p>
              <p v-if="item.key == 'dealState'">
                {{ item.label }}:
                <span>{{ getKeyVal(item.key, orderData) | dealState }}</span>
              </p>
            </div>
          </li>
        </ul>
        <Table
          :columns="abnormalColums"
          :data="warnClothesList"
          size="small"
          :stripe="true"
          :max-height="300"
        >
          <template slot-scope="{ row, index }" slot="warnNote">
            <Tag
              style="float: left;"
              color="primary"
              v-for="item in row.warnNote.split(',')"
              v-show="item != ''"
            >
              {{ item }}
            </Tag>
            <p
              style="float: left;margin-left: 10px;margin-top: 5px;"
              v-if="row.addMoney != 0"
            >
              加价{{ row.addMoney }}元
            </p>
          </template>

          <template slot-scope="{ row, index }" slot="dealState">
            <Tag color="primary">{{ row.dealState | dealState }}</Tag>
          </template>
        </Table>
      </Card>
      <Card>
        <p slot="title">
          工厂备注/补充说明
        </p>
        <Card>
          <ul class="listCon">
            <li style="width: 100%;">
              <p>
                工厂备注：
                <span>{{ orderData.warnNote || '' }}</span>
              </p>
            </li>
            <!-- <li style="width: 100%;">
      <p>补充说明：<span></span></p>
     
    </li>     -->
          </ul>
        </Card>
      </Card>
      <Card>
        <p slot="title">
          运营备注/补充说明
        </p>
        <Card>
          <ul class="listCon">
            <li style="width: 100%;">
              <!-- <p>运营备注： <span>{{orderData.dealNote || ''}}</span></p>      -->
              <Input
                type="textarea"
                v-model="orderData.operateRemark"
                placeholder="运营备注"
              ></Input>
            </li>
            <!-- <li style="width: 100%;">
      <p>补充说明：<span>{{orderData.warnNote || ''}}</span></p>     
    </li>     -->
          </ul>
        </Card>
      </Card>
      <Card>
        <p slot="title">
          订单日志
        </p>
        <ul class="listCon">
          <li v-for="(item, index) in orderLog" :key="index">
            <div v-if="!item.notImmediate">
              {{ item.label }}:
              <span>{{ getKeyVal(item.key, orderData) }}</span>
            </div>
          </li>
        </ul>
      </Card>
      <!-- <Divider orientation="center">地址信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>取件联系人：{{ orderInfo.orderMall.takeMan }}</div>
        </Col>
        <Col span="12">
          <div>取件联系电话：{{ orderInfo.orderMall.takePhone }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>
            取件地址：
            {{ orderInfo.orderMall.takeProvince }}
            {{ orderInfo.orderMall.takeCity }}
            {{ orderInfo.orderMall.takeCounty }}
            {{ orderInfo.orderMall.takeAddress }}
          </div>
        </Col>
      </Row>

      <Row :gutter="16">
        <Col span="12">
          <div>送衣联系人：{{ orderInfo.orderMall.backMan }}</div>
        </Col>
        <Col span="12">
          <div>送衣联系电话：{{ orderInfo.orderMall.backPhone }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>
            送衣地址：
            {{ orderInfo.orderMall.backProvince }}
            {{ orderInfo.orderMall.backCity }}
            {{ orderInfo.orderMall.backCounty }}
            {{ orderInfo.orderMall.backAddress }}
          </div>
        </Col>
      </Row>
      <Divider orientation="center">物流信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>取件物流：{{ orderInfo.sendLogistics.logisticsName }}</div>
        </Col>
        <Col span="12">
          <div>
            取件物流状态：
            <template v-if="orderInfo.sendLogistics.state == 1">
              待取件
            </template>
            <template v-if="orderInfo.sendLogistics.state == 2">
              运输中
            </template>
            <template v-if="orderInfo.sendLogistics.state == 3">
              确认收货
            </template>
          </div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <div>取件物流单号：{{ orderInfo.sendLogistics.logisticsNum }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>收件物流：{{ orderInfo.backLogistics.logisticsName }}</div>
        </Col>
        <Col span="12">
          <div>
            取件物流状态：
            <template v-if="orderInfo.backLogistics.state == 1">
              待取件
            </template>
            <template v-if="orderInfo.backLogistics.state == 2">
              运输中
            </template>
            <template v-if="orderInfo.backLogistics.state == 3">
              确认收货
            </template>
          </div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <div>收件物流单号：{{ orderInfo.backLogistics.logisticsNum }}</div>
        </Col>
      </Row>

      <Divider orientation="center">工厂备注</Divider>
      <Row :gutter="16">
        <Col span="24">
          <div>{{ orderInfo.orderMall.factoryRemark }}</div>
        </Col>
      </Row>
      <Divider orientation="center">运营备注</Divider>
      <Row :gutter="16">
        <Col span="24">
          <Input type="textarea" v-model="orderInfo.orderMall.operateRemark" placeholder="运营备注"></Input>
        </Col>
      </Row> -->
      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button @click="confirm" type="primary">确定</Button>
      </div>
      <Drawer
        class-name="logisticsDrawer"
        width="500px"
        :title="logisticsTitle"
        v-model="logisticsFlag"
      >
        <Timeline v-if="logisticsTimeLine.length != 0">
          <TimelineItem v-for="item in logisticsTimeLine">
            <p class="time">{{ item.acceptTime }}</p>
            <p class="content">{{ item.remark }}</p>
            <p class="content">{{ item.acceptAddress }}</p>
          </TimelineItem>
        </Timeline>
        <p class="noData">暂无物流信息</p>
      </Drawer>
    </Modal>
    <Modal
      v-model="picFlag"
      :title="'查看图片'"
      :mask-closable="true"
      width="80vw"
    >
      <div style="width: 1150px;height: 650px;margin: 0 auto;">
        <img
          v-for="(item, index) in picList"
          style="width: 1150px;height: 650px;"
          :src="item"
          alt=""
        />
      </div>
    </Modal>
  </div>
</template>

<script>
  import orderDetail from '../mixin/orderDetail.js';

  export default {
    name: 'order-ope',
    mixins: [orderDetail],
    data() {
      return {
        isTableLoading: false,
        logisticsFlag: false,
        isShowModal: false,
        loadingBtn: false,
        picFlag: false,
        logisticsTitle: '',
        orderData: {},
        warnClothesList: [],
        logisticsTimeLine: [],
        picList: [],
        goodsSkuInfo: {},
        title: '订单详情'
      };
    },
    methods: {
      // 显示模态框
      show(row) {
        this.getOrderMallById(row);
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        this.axios
          .get('/orderMall/orderDetail', {
            params: { orderCode: row.mallOrderCode }
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.isShowModal = true;
              let obj = {
                backDeliveryName:
                  res.data?.deliveries?.backDelivery?.deliveryName || '--',
                backWayBillNo:
                  res.data?.deliveries?.backDelivery?.wayBillNo || '--',
                backState: res.data?.deliveries?.backDelivery?.state || '--',
                takeDeliveryName:
                  res.data?.deliveries?.takeDelivery?.deliveryName || '--',
                takeWayBillNo:
                  res.data?.deliveries?.takeDelivery?.wayBillNo || '--',
                takeState: res.data?.deliveries?.takeDelivery?.state || '--'
              };
              this.warnClothesList = [];
              res.data.clothesList.map(data => {
                if (data.warnState > 0) {
                  this.warnClothesList.push(data);
                }
              });

              this.orderData = {
                ...res.data,
                ...obj
              };
              console.log(this.orderData);
            } else {
              this.$Message.error(res.msg);
            }
          })
          .catch(err => {
            debugger;
            this.$Message.error('系统内部错误，请稍后再试！');
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
      },
      confirm() {
        console.log(this.orderData, 'operateRemark')
        this.axios
          .post('/orderMall/operateRemark', {
            orderCode: this.orderData.orderCode,
            operateRemark: this.orderData.operateRemark
          })
          .then(res => {
            this.hide();
          });
      },
      // 查看图片
      picDetail(row) {
        this.picList = [];
        row.imgUrls.map(data => {
          this.picList.push(this.orderData.imgBaseUrl + data);
        });

        this.picFlag = true;
      },
      seeLogistics(type, wayBillNo) {
        if (wayBillNo == '--') {
          return this.$Message.error('暂无物流信息');
        }
        this.axios
          .get('/orderMall/getDeliveryRouters', {
            params: { wayBillNo: wayBillNo }
          })
          .then(res => {
            this.logisticsTimeLine = res.data.routes;
            this.logisticsFlag = true;
            if (type == 1) {
              //取件物流
              this.logisticsTitle = '取件物流信息';
            } else {
              //送件物流
              this.logisticsTitle = '送件物流信息';
            }
          });
      }
    }
  };
</script>

<style scoped lang="less">
  ::v-deep .ivu-card {
    margin-top: 10px;
  }
  ::v-deep .logisticsDrawer {
    z-index: 999999 !important;
  }
  ::v-deep .ivu-modal-body {
    height: calc(100vh - 250px);
    overflow-y: scroll;
  }
  .noData {
    width: 100%;
    text-align: center;
    margin-top: 100px;
  }
  ::v-deep .ivu-modal-body::-webkit-scrollbar {
    width: 1px;
  }
  /deep/.ivu-row {
    margin-bottom: 5px;
  }
  .listCon {
    width: 100%;
    li {
      list-style: none;
      width: 25%;
      height: 30px;
      line-height: 30px;
      display: inline-block;
    }
  }
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
